<template>
    <div class="note-class-wrapper">
        <div class="note-class" :class="{ 'hide': isShowMenu }">

            <header>
                <div>
                    <van-icon name="wap-nav" @click="isShowMenu = true" />
                </div>

                <div>
                    <van-icon name="edit" @click="goNotePublish" />
                    <van-icon name="like-o" />
                    <van-icon name="search" />
                </div>
            </header>

            <section>
                <!-- 循环遍历 添加背景颜色 -->
                <div class="note-item" v-for="(item, index) in noteClassList" :key="index"
                    :style="{ backgroundColor: item.bgColor }" @click="goNoteList(item.title)">
                    <span class="title">{{ item.title }}</span>
                </div>
            </section>

        </div>

        <Menu class="menu" :class="{ 'show': isShowMenu }" @hidden="handle"></Menu>
    </div>
</template>

<script setup>
import Menu from "@/components/Menu.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const noteClassList = [
    { bgColor: "#f0aa84", title: "美食" },
    { bgColor: "#dcf189", title: "旅行" },
    { bgColor: "#e0c2f1", title: "恋爱" },
    { bgColor: "#c2ebf1", title: "学习" },
    { bgColor: "#949c9d", title: "吵架" },
];

const isShowMenu = ref(false);
const handle = (e) => {
    isShowMenu.value = e;
    console.log(e);

};

const goNoteList = (title) => {
    router.push({ path: '/noteList', query: { title: title } })
};

const goNotePublish = () => {
    router.push('/notePublish')
}
</script>

<style lang="less" scoped>
.note-class-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .note-class {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0.5866rem;
        box-sizing: border-box;
        overflow-y: scroll;
        transition: all 0.5s;

        &.hide {
            transform: translateX(100%);
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.2rem;
            font-size: 1rem;

            van-icon {
                font-size: 1.2rem;
                margin: 0, 0.2rem;
            }
        }

        section {
            width: 100%;

            .note-item {
                height: 3.2rem;
                border-radius: 0.3rem;
                margin: 0.6rem 0;
                background-color: #f1f1f1;
                box-shadow: 0 4px 10px 5px #c0c0c0;
                overflow: hidden;

                .title {
                    display: block;
                    font-size: 0.5rem;
                    color: #ff6f00;
                    margin-top: 0.3rem;
                    text-align: center;
                }
            }
        }
    }

    .menu {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateX(-100%);
        transition: all 0.5s;

        &.show {
            transform: translateX(0);
        }
    }
}
</style>
